<script lang="ts" setup>
import {getComment} from '~/api/comment'
import type {IComment} from '~/types/api';
import dayjs from 'dayjs'

const {id} = defineProps<{ id: number }>()
// 分页器默认数据
const paginationData = reactive({page: 1, total: 0, pageSize: 8})
const {contentPoint, easyPoint, logicPoint} = $(useVideo())

// 评论列表接口请求
let data = $ref<IComment>()
data = (await getComment({page: paginationData.page, size: paginationData.pageSize, id})).data

// 修改总数
paginationData.total = data?.total_record || 0

// 分页器的切换重新请求接口数据
const change = async (page: number) => {
    paginationData.page = page
    data = data = (await getComment({page, id, size: paginationData.pageSize})).data
}
</script>

<template>
    <div wfull>
        <div class="evaluation">
            <div flex items-center mr-74px>
                <h2>综合<br/>评分</h2>
                <h2 class="text-52px! color-#f38e48! ml-5px w-60px!">
                    {{ ((contentPoint + easyPoint + logicPoint) / 3).toFixed(2) }}
                </h2>
            </div>

            <div class="vertical-line"></div>

            <div flexc flex-col ml-65px mr-65px font-500>
                <span text-28px color="#f38e48">{{ contentPoint }}</span>
                <span text-20px color="#222222" w-87px>内容实用</span>
            </div>
            <div class="vertical-line"></div>

            <div flexc flex-col ml-65px mr-65px font-500>
                <span text-28px color="#f38e48">{{ easyPoint }}</span>
                <span text-20px color="#222222" w-87px>简洁易懂</span>
            </div>
            <div class="vertical-line"></div>

            <div flexc flex-col ml-65px mr-65px font-500>
                <span text-28px color="#f38e48">{{ logicPoint }}</span>
                <span text-20px color="#222222" w-87px>逻辑清晰</span>
            </div>
        </div>

        <div v-for="item in data?.current_data ?? []" :key="item.id" ml-34px mt-39px>
            <div flex>
                <cdn-img w-60px h-60px :src="item.head_img" class="rounded-full"/>
                <div ml-10px wfull>
                    <div flexb>
                        <span text="#333333" text-20px>{{ item.username }}</span>
                        <!-- <a-rate :value="item.total_point / 10 / 2" disabled character="★" /> -->
                    </div>
                    <p text-16px mt-6px color="#555555">{{ item.content }}</p>

                    <div flexb p1 color="#aaaaaa">
                        <span>{{ dayjs(item.gmt_create).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <pagination v-model:pagination="paginationData" @change="change" v-if="paginationData.page > 1"/>
    </div>
</template>

<style lang="less" scoped>
.evaluation {
    display: flex;
    height: 100px;
    border-radius: 10px;
    padding: 22px 0;
    padding-left: 49px;
    line-height: 28px;
    box-shadow: 0px 0px 10px 0px #d5d5d5;

    h2 {
        font-size: 24px;
        color: #222222;
    }

    .vertical-line {
        width: 1px;
        height: 60px;
        border-right: 1px solid #d7d7d7;
        background-color: rgba(255, 255, 255, 0);
    }
}
</style>
